<template>
    <el-dialog title="预览" :visible.sync="$props.dialogVisible" :before-close="handleClose" :modal="false" :close-on-click-modal="false">
      <div v-if="getFileType(fileUrl) == 'docx'">
        <vue-office-docx
          :src="fileUrl"
          style="height: 100vh;overflow: auto"
          @rendered="rendered"
          @error="errorHandler"
        />
      </div>
      <div v-if="getFileType(fileUrl) == 'xlsx'">
        <vue-office-excel
          :src="fileUrl"
          style="height: 100vh;overflow: auto"
          @rendered="rendered"
          @error="errorHandler"
        />
      </div>
      <div v-if="getFileType(fileUrl) == 'pdf'">
        <vue-office-pdf
          :src="fileUrl"
          style="height: 100vh;overflow: auto"
          @rendered="rendered"
          @error="errorHandler"
          :options="{
              width: '100%',
              overflow: 'auto'
            }"
        />
      </div>
    </el-dialog>
  </template>
  
  <script>
  
  // 引入VueOffice组件
  import VueOfficeDocx from '@vue-office/docx'
  import VueOfficeExcel from '@vue-office/excel'
  import VueOfficePdf from '@vue-office/pdf'
  // 引入相关样式
  import '@vue-office/docx/lib/index.css'
  import '@vue-office/excel/lib/index.css'
  export default {
    name: 'FilePreviewDialog',
    components: {
      VueOfficeDocx,
      VueOfficeExcel,
      VueOfficePdf
    },
    props: {
      fileUrl: String, // 文件url
      dialogVisible: { // 控制显示
        type: Boolean,
        default: false
      }
    },
    methods: {
  
      // 获取文件类型
      getFileType (fileUrl) {
        if (fileUrl !== '' && fileUrl != null && fileUrl !== undefined) {
          const fileType = fileUrl.split('.').pop().toLowerCase() // 文件的扩展名（格式）
          return fileType
        } else {
          return 'docx'
        }
      },
  
      // 渲染结果
      rendered () {
      },
  
      errorHandler () {
        this.$notify.error('加载失败')
      },
  
      // 关闭
      handleClose (done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            this.$emit('closePreviewDialog', false)
          })
          .catch(_ => {})
      }
  
    }
  
  }
  </script>
  